<template>
  <div style="width:100%;">
    <input type="text" v-model="publishNewType.title" placeholder="新闻标题" class="input" style="width:84%;">
    <select id="gender" name="gender" class="input" v-model="publishNewType.categoryId">
      <option value="0" selected disabled>新闻分类</option>
      <option :value="item.id"
              v-for="(item, index) in categoryList"
              :key="index">
        {{ item.categoryName }}
      </option>
    </select>
    <div class="publish-content">
        <div style="width:100%;height:100%;display: flex;">
          <v-md-editor style="flex:1;"
                       :disabled-menus="[]"
                       placeholder="新闻内容"
                       v-model="publishNewType.content"
                       @upload-image="handleUploadImage"
                       class="avatar-uploader">
          </v-md-editor>
        </div>
    </div>
    <el-upload
        class="avatar-uploader"
        :action="File_API.IMAGE_URL"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>

    <button class="publish-button" @click="publish"> 发布新闻 </button>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {onMounted, reactive, ref} from "vue";
import { useRouter,useRoute } from 'vue-router'
import { reqPublishNewType } from "@/api/news/type";
import { getAllCategory } from "@/api/category";
import { reqPublishNew } from "@/api/news";
import {ElMessage} from "element-plus";
import { File_API } from "@/api/file";
import {CategoryItem} from "@/api/category/type";


onMounted(async () => {
  await getCategoryList()
  console.log('publish-new')
})
// 使用useRoute方法获取路由信息
const route = useRoute()
const router = useRouter()
//分类列表
const categoryList = ref<CategoryItem[]>()
//新闻发布请求体
const publishNewType = reactive({
  categoryId: 0,
  author: 'admin',
  title: '',
  coverImage: '...',
  content: '...'
})
//获取分类
const getCategoryList = async() => {
  try {
    const { data } = await getAllCategory()
    // console.log(data)
    categoryList.value = data
    console.log(categoryList.value)
  } catch(error) {
    await Promise.reject(error)
  }
}

//封面显示
const imageUrl = ref<string>('')
const handleAvatarSuccess = (res: any, file: any) => {
  imageUrl.value = URL.createObjectURL(file.raw)
  console.log(res.data.url)
  publishNewType.coverImage = res.data.url
}
const handleUploadImage = (event: Event, insertImage: any, files: File[]) => {
  for (let i in files) {
    const formData = new FormData()
    formData.append('file', files[i])
    axios.post(`${File_API.IMAGE_URL}`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then(
        (response) => {
          const { data } = response.data
          insertImage({
            url: data,
            desc: 'desc',
          })
        },
        (error) => {
          ElMessage.error(error.message)
        },
    )
  }
}
//发布新闻
const publish = async() => {
  try {
    console.log(publishNewType)
    const res = await reqPublishNew(publishNewType)
    console.log(res)
  } catch (error) {
    await Promise.reject(error)
  }
}
</script>

<style scoped>
.publish-content{
  margin-top:5%;
  width:88%;
  height:50%;
  background-color: #FAF9F7;
  /*border: 1px solid red;*/
  display: flex;
}

.input {
  border:0;
  background-color: #FAF9F7;
  border-bottom:3px solid #888888;
  width:20%;
  height:60px;
  margin-top: 5%;
  font-size: 18px;
  color:#52575C;
  padding-left: 20px;
  margin-left: 0px;
}
.input:focus {
  outline: none;
}
.input::-webkit-input-placeholder {
  text-indent: 0px;
}
.input:focus::placeholder {
  transform: scale(0.8) translateY(-100%);
  text-indent: 0px;
}
.input:focus {
  border-bottom:3px solid #14B86E;
}
.avatar-uploader {
  margin-top: 40px;
  width:268px;
  height:178px;
  border: 1px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 268px;
  height: 178px;
}
.avatar {
  width: 268px;
  height: 178px;
  display: block;
}
.publish-button {
  margin-top: 5%;
  margin-left:40%;
  margin-bottom: 10%;
  border:0;
  background-color: #119C59;
  color:white;
  font-size: 22px;
  width:200px;
  height:70px;
  border-radius: 50px;
}
</style>
